<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import LogoLink from "@/components/LogoLink.vue";
import request from '@/utils/request';

const router = useRouter();

// 登录表单数据
const loginForm = reactive({
  userPhone: '',
  userPassword: '',
  rememberMe: false
});

// Login.vue 中的 handleLogin 方法
const handleLogin = async () => {
  // 添加非空验证
  if (!loginForm.userPhone.trim()) {
    alert('请输入账号（手机号）');
    return;
  }

  if (!loginForm.userPassword.trim()) {
    alert('请输入密码');
    return;
  }

  try {
    const response = await request.post('/user/login', {
      userPhone: loginForm.userPhone,
      userPassword: loginForm.userPassword
    });

    console.log('登录成功', response);

    // Sa-Token 会在登录时自动设置 token 到响应头中
    // 从响应头中获取 token 并保存到 localStorage
    const token = response.headers?.satoken || response.headers?.['satoken'];
    if (token) {
      localStorage.setItem('satoken', token);
    }

    // 保存用户信息到本地存储
    if (response.data) {
      localStorage.setItem('userInfo', JSON.stringify(response.data));
    }

    router.push('/Main');
  } catch (error: any) {
    console.error('登录失败', error);
    if (error.response && error.response.status === 401) {
      alert('账号或密码错误');
    } else {
      alert('登录失败，请稍后重试');
    }
  }
};





// 处理注册
const handleRegister = () => {
  router.push('/Register');
};

// 处理返回主页
const goToHomepage = () => {
  router.push({ name: 'Homepage' });
};

</script>


<template>
  <div class="common-layout">
    <!-- 全屏背景 -->
    <div class="Background"></div>

    <!-- 最外层容器 -->
    <el-container>
      <!-- 主体区域 -->
      <el-main class="Body">
        <!-- 登录表单区域 -->
        <div class="login-container">
          <div class="login-box">
            <LogoLink />
            <p class="login-desc">登录以进入FRT</p>
            <el-form class="form" :model="loginForm" label-width="0">
              <!-- 账号输入框 -->
              <el-form-item>
                <el-input v-model="loginForm.userPhone" placeholder="账号（手机号）" prefix-icon="el-icon-user"></el-input>
              </el-form-item>

              <!-- 密码输入框 -->
              <el-form-item>
                <el-input v-model="loginForm.userPassword" type="password" placeholder="密码" prefix-icon="el-icon-lock"></el-input>
              </el-form-item>

              <!-- 记住我选项 -->
              <el-form-item class="checkbox-item">
                <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
              </el-form-item>

              <!-- 登录按钮 -->
              <el-form-item>
                <el-button type="primary" class="login-btn" block @click="handleLogin">登录</el-button>
              </el-form-item>

              <!-- 注册新账号链接 -->
              <div class="register-link">
                <el-link type="primary" @click="handleRegister">注册新账号</el-link>
              </div>
            </el-form>

            <!-- 🔽 新增：返回主页链接（放在 login-box 内部左下角） -->
            <div class="back-link">
              <a href="#" @click.prevent="goToHomepage">← 返回主页</a>
            </div>
          </div>

        </div>
      </el-main>

    </el-container>

  </div>
</template>



<style scoped>
/* 全屏背景 */
.Background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('@/assets/Homepage.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* 主体区域样式 */
.Body {
  width: 100%;
  min-height: 100vh;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.login-container {
  width: 400px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.login-box {
  text-align: center;
  position: relative; /* 启用相对定位 */
}

.login-desc {
  margin-bottom: 20px;
  color: #666;
}

.el-input {
  width: 100%; /* 或者指定具体值如 300px */
  height: 50px; /* 设置高度为 50px */
}

.form {
  margin-bottom: 20px;
}

.checkbox-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.login-btn {
  width: 100%;
  height: 50px;
  background-color: #409eff;
  border: none;
  font-size: 20px;
}

.register-link {
  text-align: center;
}

.register-link a:hover {
  color: #3366cc;
}


.back-link {
  position: absolute;
  bottom: 0px;
  left: 0;
  font-size: 14px;
}

.back-link a {
  color: #409eff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.back-link a:hover {
  color: #3366cc;
}

</style>
